<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="../css/style.css" type="text/css">
        <style type="text/css">
            a img {
                border: 0
            }
        </style>
        <script src="js/jquery-1.3.2.min.js" type="text/javascript">
        </script>
        <script>
            $(document).ready(function(){
                $("#ocultar").click(function(event){
                    event.preventDefault();
                    $("#busge").hide("slow");
                });
                $("#mostrar").click(function(event){
                    event.preventDefault();
                    $("#busge").show(1000);
                });
            });
            
            
            
            function comida(cadena){
                if (cadena == "Restaurantes" || cadena == "Bares de tapas") {
                    document.getElementById('comida').disabled = false;
                }
                else {
                    document.getElementById('comida').disabled = true;
                }
                if (cadena == "Discotecas" || cadena == "Bares de copas/Pub") {
                    document.getElementById('musica').disabled = false;
                }
                else {
                    document.getElementById('musica').disabled = true;
                }
            }
            
        </script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
        </script>
        <style>
            #fade { /*--Transparent background layer--*/
                display: none; /*--hidden by default--*/
                background: #000;
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                opacity: .80;
                z-index: 9999;
            }
            
            .popup_block {
                display: none; /*--hidden by default--*/
                background: #fff;
                padding: 20px;
                border: 20px solid #ddd;
                float: left;
                font-size: 1.2em;
                position: fixed;
                top: 50%;
                left: 50%;
                z-index: 99999;
                /*--CSS3 Box Shadows--*/
                -webkit-box-shadow: 0px 0px 20px #000;
                -moz-box-shadow: 0px 0px 20px #000;
                box-shadow: 0px 0px 20px #000;
                /*--CSS3 Rounded Corners--*/
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
            }
            
            img.btn_close {
                float: right;
                margin: -55px -55px 0 0;
            }
            
            /*--Making IE6 Understand Fixed Positioning--*/ * html #fade {
                position: absolute;
            }
            * html .popup_block {
                position: absolute;
            }
        </style>
        <script>
            $(document).ready(function(){
            
                //When you click on a link with class of poplight and the href starts with a # 
                $('a.poplight[href^=#]').click(function(){
                    var popID = $(this).attr('rel'); //Get Popup Name
                    var popURL = $(this).attr('href'); //Get Popup href to define size
                    //Pull Query & Variables from href URL
                    var query = popURL.split('?');
                    var dim = query[1].split('&');
                    var popWidth = dim[0].split('=')[1]; //Gets the first query string value
                    //Fade in the Popup and add close button
                    $('#' + popID).fadeIn().css({
                        'width': Number(popWidth)
                    }).prepend('<a href="#" class="close"><img src="images/botones/close.png" class="btn_close" title="Cerrar" alt="Close" /></a>');
                    
                    //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
                    var popMargTop = ($('#' + popID).height() + 80) / 2;
                    var popMargLeft = ($('#' + popID).width() + 80) / 2;
                    
                    //Apply Margin to Popup
                    $('#' + popID).css({
                        'margin-top': -popMargTop,
                        'margin-left': -popMargLeft
                    });
                    
                    //Fade in Background
                    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
                    $('#fade').css({
                        'filter': 'alpha(opacity=80)'
                    }).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 
                    return false;
                });
                
                //Close Popups and Fade Layer
                $('a.close, #fade').live('click', function(){ //When clicking on the close or fade layer...
                    $('#fade , .popup_block').fadeOut(function(){
                        $('#fade, a.close').remove(); //fade them both out
                    });
                    return false;
                });
            });
        </script>
        <title>Búsqueda</title>
    </head>
    <body>
        <div id="busgeneral">
        	
            <div id="popup_name" class="popup_block" style="display:none">
                <h2>Cómo funcionan los buscadores</h2>
                <p>
                    Texto explicativo del funcionamiento del buscador
                </p>
               
            </div>
			
            <div id="titulobuscador">
                <img src="images/titulobuscador.jpg" width="765" height="30" border="0">
				<a href="#?w=500" rel="popup_name" class="poplight">
					<img src="images/titulobuscador2.jpg" width="180" height="30" border="0"/></a>
            </div>
            </body>
        </html>
